<template>
  <div class="wrapper">
    <div class="banner-img-cntainer" w-600-330 aspectratio>
      <img
        :src="currentImg"
        alt=""
        aspectratio-content
        @click="handleOpen"
      >
      <div class="pic-number"><span class="iconfont">&#xe64a;</span><span>{{imgLength}}</span></div>
      <div class="desc">
        <p>{{singleName}}</p>
        <p>视频</p>
      </div>
    </div>
    <fade-animation>
       <common-gallery :list="list" v-show="isClose" @close="handleClose"></common-gallery>
    </fade-animation>
  </div>
</template>

<script>
import CommonGallery from 'common/gallery/Gallery'
import FadeAnimation from 'common/fade/Fade'
export default {
  name: 'Detail-Banner',
  components: {
    CommonGallery,
    FadeAnimation
  },
  props: {
    singleName: {
      type: String
    },
    currentImg: {
      type: String
    },
    list: {
      type: Array
    }
  },
  data () {
    return {
      isClose: false
    }
  },
  methods: {
    handleOpen () {
      this.isClose = true
    },
    handleClose () {
      this.isClose = false
    }
  },
  computed: {
    imgLength () {
      return this.list.length
    }
  }
}
</script>

<style lang="stylus" scoped>
  .wrapper
    width 100%
    .pic-number
      display flex
      justify-content space-around
      align-items  center
      width 100px
      height 40px
      position absolute
      bottom 100px
      left 20px
      background-color rgba(0,0,0,0.7)
      border-radius 20px
      font-size 30px
      color #fff
      text-align center
    .desc
      position absolute
      bottom 20px
      left 0
      display flex
      justify-content space-between
      padding 0 20px
      box-sizing border-box
      align-items center
      width 100%
      height 40px
      color #fff
      font-size 30px
      background-image linear-gradient(to top,rgba(0,0,0,0),rgba(0,0,0,0.5))
    .content
      height 2000px
</style>
